<head>
  <title>Gi-CollectionFS</title>
  <meta http-equiv="Content-Type" content="text/ html; charset=UTF-8" />
</head>
<body>
  <a href="https://github.com/raix/Meteor-CollectionFS.git"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
  <div class="navbar navbar-inverse navbar-static-top">
    <!-- Main menu bar -->
    <div class="navbar-inner">
      <div class="container">
        <button id="mainMenuToggle" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="brand" href="#">Gi-CollectionFS{{> connectionStatus}}</a>
        <!-- Main menu Current Folder -->
        {{loginButtons}}

        {{> mainMenu}}
      </div> <!-- container -->  
    </div> <!-- EO navbar inner -->
  </div> <!-- EO navbar top -->
  
  <div class="container-fluid"> 
    <div class="row-fluid">
      <!-- Side bar -->
      <div class="span2">

      </div> <!-- EO side bar -->
      <!-- Body content -->
      <div class="span10">

        {{> uploadTest}}
        
      </div> <!-- EO Body content -->
    </div> <!-- EO row -->
  </div> <!-- EO container fluid -->

  {{> viewImage}}
  <br/>
  <br/>

</body>

<template name="loginInto">
  <table class="table-bordered" width="100%">
    <tr>
      <td>
        <h3>Log in'n try uploading</h3>
        <i>Login and upload some files and test pause/start + resume capabilities after connection loss or browser crash..</i><br/>
        <br/>
        In short: CollectionFS is a GridFS like storage build on Meteor and node.js<br/>
        <br/>
        Files can be converted from database to filesystem via simple filehandlers<br/>
        Filehandlers can also be used to convert images, sound, video, doc, pdf etc. eg. for a 40x40px img using imagemagick. Or upload to remote server. The client is reactivly updated as filehandling finishes.
        <pre>
Filesystem.fileHandlers({
  default1: function(options) {
    //passthrough to cache or change the data `options.blob` and `options.fileRecord`
    return { blob: options.blob, fileRecord: options.fileRecord }; //if no blob then save result in fileURL (added createdAt)
  }
});</pre>
        <br/>
        Do check out the readme on Git, more details on design and usage.
        <i>Well, got a bit optimized and runs in 0.6.0, Nice job Meteor guys!</i>     
      </td>
   </tr>
  </table> 
</template>

<template name="dropzone">
  <div id="dropzone" class="dropzone">
    <div style="text-align: center; color: gray;">Drop file to upload</div>
  </div>
</template>

<template name="queueControl">
  <table class="table-bordered" width="100%">
    <tr>
      <td colspan="1" style="vertical-align: top;">
        <h4>Upload file</h4>
        <input name="files" type="file" class="fileUploader" multiple>
        <br/>
        <br/>
        
        <a href="#" class="btn btn-success btnCreateServerFile"><i class="icon-plus icon-white"></i>Create</a><br/>
        <small>Created a text file on the server</small>
      </td><td colspan="2">
        {{> dropzone}}
        <br/>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">
        <h4>Queue</h4>
        {{#if isPaused}}
          <a href="#" class="btn btnResume"><i class="icon-play"></i>Resume</a>
        {{else}}
          <a href="#" class="btn btnPause"><i class="icon-pause"></i>Pause</a>
        {{/if}}
        <h4>Reset filehandlers</h4>
        <a href="#" class="btn btn-danger btnResetFilehandlers"><i class="icon-refresh icon-white"></i>Reset</a><br/>
        <small>This will trigger a complete rerun of filehandlers</small>
      </td>
      <td>
        {{#with getSession 'filter'}}
          <h4>Filter options</h4>
          <select id="sortby" class=".sortby">
            <option value=""{{isSelected sortBy ''}}>No sorting</option>
            <option value="uploadDate"{{isSelected sortBy 'uploadDate'}}>Sort by uploadDate</option>
            <option value="filename"{{isSelected sortBy 'filename'}}>Sort by filename</option>
            <option value="handledAt"{{isSelected sortBy 'handledAt'}}>Sort by handledAt</option>
            <option value="complete"{{isSelected sortBy 'complete'}}>Sort by complete</option>
            <option value="currentChunk"{{isSelected sortBy 'currentChunk'}}>Sort by currentChunk</option>
            <option value="countChunks"{{isSelected sortBy 'countChunks'}}>Sort by countChunks</option>
            <option value="numChunks"{{isSelected sortBy 'numChunks'}}>Sort by numChunks</option>
            <option value="length"{{isSelected sortBy 'length'}}>Sort by length</option>
            <option value="contentType"{{isSelected sortBy 'contentType'}}>Sort by contentType</option>
            <option value="owner"{{isSelected sortBy 'owner'}}>Sort by owner id</option>
            <option value="_id"{{isSelected sortBy '_id'}}>Sort by hash id</option>
          </select>
          <input id="reversed" type="checkbox"{{isChecked reversed true}}/> Reverse
          <br/>
          <select id="limit" class=".limit">
            <option value="0"{{isSelected limit 0}}>No limit</option>
            <option value="5"{{isSelected limit 5}}>Limit to 5</option>
            <option value="10"{{isSelected limit 10}}>Limit to 10</option>
            <option value="25"{{isSelected limit 25}}>Limit to 25</option>
            <option value="50"{{isSelected limit 50}}>Limit to 50</option>
          </select>
        {{/with}}
        </td><td>
        {{#with getSession 'filter'}}
          <h4>Show</h4>
          <select id="owner" class=".owner">
            <option value="0"{{isSelected owner false}}>All files</option>
            <option value="1"{{isSelected owner true}}>Only my files</option>
          </select>
          <br/>
          <select id="completed" class=".completed">
            <option value=""{{isSelected completed ''}}>All</option>
            <option value="1"{{isSelected completed true}}>Completed</option>
            <option value="0"{{isSelected completed flase}}>Uncompleted</option>
          </select>
        {{/with}}
      </td>
   </tr>
  </table> 
  <i>There are 5 test filehandlers, each just makes a copy of db file onto the filesystem. In this demo the custom rule is: 4 of them only run if size not bigger than 5Mb and mime-type is 'image/jpeg'</i><br/>
</template>

<template name="imageList">
  {{#each fileHandler}}
    {{#if url}}
      {{#if orEqual extension 'jpg' 'jpeg'}}
        {{#constant}}
          <a href="#myModal" data-toggle="modal" class="showImage"><img src="{{../../../../fileHandler.default1.url}}"
            title="{{../../../../filename}}" width="20px"/></a>
        {{/constant}}
      {{else}}
          <a href="#myModal" data-toggle="modal" class="btn showImage" title="{{../../../filename}}">Open</a>
      {{/if}}
    {{/if}}
  {{else}}
    No cache
  {{/each}}
</template>

<template name="fileTable">
  <table class="table-hover table-bordered" width="100%">
    <tr>
      <th>Filehandlers<br/><i><small>http</small></i></th><th>Action<br/><i><small>ddp</small></i></th><th>Size</th><th>Status</th><th>Name</th><th>Progress</th><th>Owner</th>
    </tr>

    {{#each Files}}
    <tr>
      <td>
        {{#if filehanderSupported}}
          {{> imageList}}
        {{/if}}
      </td>
      <td>
        {{#if needToResumeUpload}}
          {{#if isOwner}}
            <input name="files" type="file" class="btnResumeFile" style="width:60px;">
            {{#if isOwner}}
              <a class="btn btn-danger btn-mini btnFileDelete">Delete</a>
            {{/if}}
          {{else}}
            <span class="label label-info">
              Waiting
            </span>
          {{/if}}
        {{else}}
          {{#if isDownloading}}
            {{#if isPaused}}
              <span class="label label-warning">
                Paused
              </span>
            {{else}}
              <span class="label label-info">
                Loading
              </span>
            {{/if}}
          {{else}}
            <a class="btn btn-primary btn-mini btnFileSaveAs">Save as</a>
            {{#if isOwner}}
              <a class="btn btn-danger btn-mini btnFileDelete">Delete</a>
            {{/if}}
          {{/if}}
        {{/if}}
      </td>
      <td>{{niceSize}}</td>
      <td>        
        <span class="label {{transfereStyleBS}}">
          {{transfereText}}
        </span> 
      </td>
      <td>{{filename}}</td>
      <td>
        <div class="progress" style="margin:0px;">
          {{#with progress}}
          <div class="bar {{barAStyle}}" style="width: {{progressA}}%;">{{progressA}}%</div>
          <div class="bar {{barBStyle}}" style="width: {{progressB}}%;">{{progressB}}%</div>
          {{/with}}
        </div>
      </td>
      <td>
        {{getUsername owner}}
      </td>
    </tr>
    {{else}}
    <tr>
      <td colspan="6" align="center" style="padding: 40px;">
        No files, yet!<br/>
        <br/>
        <i>upload some files and test resume capabilities after connection loss or browser crash..</i>
      </td>
    </tr>
    {{/each}}
  </table>
</template>

<template name="viewImage">   
  <!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">View a cached version</h3>
    </div>
    <div class="modal-body">
      <p><img id="previewImage" src=""/></p>
      <div id="description"></div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</template>

<template name="supportInfo">
  {{#if filehandlerSupported}}
    <div class="alert alert-success">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Congrats! Filehandlers are supported in bundles, enjoy!<br/>
      <small>
        Got fast! and now supports Meteor 0.6.0! <br/>
        <i>Sorry I had to remove all the files due to deprecation of '.len'<br/>
          Currently thinking about "server, fetch remote file for the client" + test GraphicsMagick</i>
      </small>
    </div>
  {{else}}
    <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Serverside filehandling not supported on this server, app need read/write access in order to save uploaded files
    </div>
  {{/if}}

</template>

<template name="uploadTest">
  {{#if currentUser}}
    {{> supportInfo}}
    {{> queueControl}} 
  {{else}}
    {{> loginInto}}
    {{> supportInfo}}
  {{/if}}
  <br/>
  {{> fileTable}}
</template>

<template name="mainMenu">
  <!-- Menu collapsed -->
  <div id="mainMenu" class="nav-collapse collapse">
    <ul class="nav">
      <li><a href="#" class="btnMainMenuDashboard" data-toggle="collapse" data-target=".nav-collapse">collectionFS</a></li>
    </ul>
  </div>
</template>

<template name="connectionStatus">
  {{#if connection.connected}}
  <i class="icon-signal"></i>
  {{else}}
    {{#if connection.waiting}}
      <i class="icon-repeat"></i>
    {{else}}
      <i class="icon-refresh"></i>
    {{/if}}
  {{/if}}
</template>